<template>
  <a-modal
    :confirm-loading="confirmLoading"
    :visible="visible"
    destroyOnClose
    title="相似告警配置"
    @cancel="handleCancel"
    @ok="handleOk"
  >
    <a-form-model
      ref="similarConfigForm"
      :model="model"
    >
      <template v-if="instanceSource">
        <a-form-model-item label="设备选择">
          <a-select v-model="model.instanceId" allowClear placeholder="请选择设备">
            <a-select-option v-for="instance in instanceSource" :key="instance.id">
              {{ instance.name }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="告警选择">
          <a-select v-model="model.alarmConfigId" allowClear placeholder="请选择告警配置">
            <a-select-option v-for="config in configSource" :key="config.id">
              {{ config.name }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
      </template>
    </a-form-model>
  </a-modal>

</template>

<script>
import {getAction} from '@/api/manage'

export default {
  name: 'SimilarConfigModel',
  props: {
    instanceSource: {
      type: Array,
      default: []
    }
  },
  computed: {
    instanceId() {
      return this.model.instanceId
    }
  },
  watch: {
    instanceId(val, oval) {
      let scoped = this
      console.log('watch-instanceId', oval, val)
      getAction(`/alarm/config/queryByInstanceId/${val}`).then(data => {
        if (data.success) {
          scoped.configSource = data.result
        }
      })
    }
  },
  data() {
    return {
      visible: false,
      confirmLoading: false,
      model: {
        instanceId: '',
        alarmConfigId: ''
      },
      configSource: []
    }
  },
  methods: {
    showModal() {
      this.visible = true
    },
    handleOk(e) {
      this.confirmLoading = true
      this.$emit('ok', this.model.alarmConfigId)
      setTimeout(() => {
        this.visible = false
        this.confirmLoading = false
      }, 200)
    },
    handleCancel(e) {
      console.log('Clicked cancel button')
      this.visible = false
    }
  }
}
</script>

<style scoped>

</style>